<template>
  <div class="container">
    <div class="edit_data" v-for="(item, index) in info" :key="index">
      <div class="box" v-for="(ite, index) in item.blogList" :key="index">
        <router-link
          :to="{ name: 'PostDetail', params: { uid: item.id, bid: ite._id } }"
        >
          <div class="center">
            <p class="title">{{ ite.title }}</p>
            <p class="content">{{ ite.content }}</p>
            <div class="imgs">
              <span class="imgsBox" v-for="(it, index) in ite.img" :key="index">
                <img :src="it" />
              </span>
            </div>
            <div class="tool">
              <img src="./imgs/it-avatar.png" />
              <span class="name">{{ item.name }}·</span>
              <span class="time">{{ (ite.time * 1) | dateFor }}</span>
              <span class="goods">精华</span>
              <img class="talks" src="./imgs/talks.png" />
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../API/http.js";
export default {
  data() {
    return {
      info: []
    };
  },
  created() {
    this.initData();
  },
  components: {},
  methods: {
    async initData() {
      const { data } = await http._getAll();
      let newData = data.allpost.data.post;
      this.info = data.allpost.data.post;

      let arry = [];
      for (let i = 0; i < this.info.length; i++) {
        for (let j = 0; j < this.info[i].blogList.length; j++) {
          this.info[i].blogList[j].img = JSON.parse(
            this.info[i].blogList[j].img
          );
        }
      }
      // console.log(this.info[0].blogList[0].img);
    }
  }
};
</script>
<style scoped>
* {
  font-family: "Microsoft YaHei";
  font-size: 12px;
}

.edit_data {
  width: 100%;
  /* height: 139px; */

  margin-top: 15px;
}

.box {
  margin-top: 10px;
  background: #ffffff;
}

.edit_data .center {
  width: 92%;
  height: 100%;
  margin: 0 auto;
  /* background: red; */
  overflow: hidden;
  position: relative;
}

.edit_data .center .title {
  font-size: 13px;
  color: #333333;
  font-weight: bold;
  margin-top: 10px;
}
.edit_data .center .content {
  font-size: 11px;
  color: #bcbcbc;
  margin-top: -6px;
  width: 95%;
  /* 内容过长显示两行，多余为省略号 */
  text-overflow: ellipsis; /*设置隐藏部分为省略号*/
  overflow: hidden; /*设置隐藏*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置显示行数，此处为2行，可设置其他数字*/
  -webkit-box-orient: vertical;
}

.imgs {
  margin-top: -5px;
  margin-bottom: -5px;
}
.imgs img {
  width: 31.5%;
}

.tool {
  margin-top: 5%;
  margin-bottom: 4%;
  display: flex;
  align-items: center;
}

.tool img {
  width: 18px;
  height: 18px;
}
.tool .name {
  margin-left: 3%;
  color: #00aeff;
}

.time,
.num {
  color: #bcbcbc;
}

.time {
  margin-left: 5%;
}

.goods {
  width: 34px;
  height: 16px;
  display: block;
  background: #00cc99;
  text-align: center;
  color: #ffffff;
  float: right;
  position: absolute;
  right: 25%;
}

.num {
  position: absolute;
  right: 8%;
}

.talks {
  float: right;
  position: absolute;
  right: 0px;
}

.imgsBox {
  margin-right: 6px;
}
</style>
